<template>
    <div class="container">
        <el-card shadow="hover" style="padding:0">

            <!-- 工具栏 -->
            <div class="search-bar" @keyup.enter="handleSearch">
            	<div class="left">
	                <el-form class="searchForm" ref="searchForm" :model="searchForm" :inline="true">
	                    <el-form-item prop="searchValue">
	                        <el-input placeholder="车牌号码" v-model="searchForm.carNum" clearable size="medium"></el-input>
	                    </el-form-item>

	                    <el-button type="primary" icon="el-icon-search" @click="handleSearch" size="medium">搜索</el-button>

                        <el-button type="primary" icon="el-icon-search" @click="startAnimation" size="medium">开始动画</el-button>
                        <el-button type="primary" icon="el-icon-search" @click="pauseAnimation" size="medium">暂停动画</el-button>
                        <el-button type="primary" icon="el-icon-search" @click="resumeAnimation" size="medium">继续动画</el-button>
                        <el-button type="primary" icon="el-icon-search" @click="stopAnimation" size="medium">停止动画</el-button>
	                </el-form>
                </div>
            </div>

            <div id="container" class="map-container" style="width: 100%;height: 400px"></div>

        </el-card>
    </div>
</template>

<script>
let map, marker, geolocation, geocoder, infoWindow, district, polygons = [];
// 定位
let posiotns = [
	{lng: 116.478935, lat: 39.997761},
	// {lng: 113.279717, lat: 23.125394},
	// {lng: 113.280402, lat: 23.125517},
	// {lng: 113.277134, lat: 23.125547},
	// {lng: 113.277177, lat: 23.12534},
	// {lng: 113.278277, lat: 23.125009},
	// {lng: 113.278041, lat: 23.124827},
	// {lng: 113.277596, lat: 23.124958},
	// {lng: 113.390672, lat: 23.132299}
]
// 车辆行驶轨迹
var lineArr = [
    [116.478935,39.997761],[116.478939,39.997825],[116.478912,39.998549],
    [116.478912,39.998549],[116.478998,39.998555],[116.478998,39.998555],
    [116.479282,39.99856],[116.479658,39.998528],[116.480151,39.998453],
    [116.480784,39.998302],[116.480784,39.998302],[116.481149,39.998184],
    [116.481573,39.997997],[116.481863,39.997846],[116.482072,39.997718],
    [116.482362,39.997718],[116.483633,39.998935],[116.48367,39.998968],
    [116.484648,39.999861]
];

export default {
    name: 'GPS',
    data() {
        return {
            searchForm: {
                carNum: null
            }
        }
    },
    mounted() {
        this.$nextTick(function () {
            //初始化地图
            this.initMap();
        })
    },

    methods: {
        initMap() { //初始化地图
            let _this = this
            map = new AMap.Map("container", {
                resizeEnable: true, //是否监控地图容器尺寸变化
                zoom: 17
            });

            map.on("complete", function () { // 加载完成后执行

                _this.markerPoistion()  // 地图加载完成后，标记出所有车的定位位置

                _this.polyline() // 绘制轨迹

                // _this.tiemPosition() // 标记多个
                
                // 点击事件，点击后进行标记并获取坐标
                map.on('click', function (e) {
                    //if (marker) map.remove(marker);
                    marker = new AMap.Marker({
                        icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                        position: [e.lnglat.getLng(), e.lnglat.getLat()]
                    });
                    console.log(e.lnglat.getLng(), e.lnglat.getLat());
                    map.add(marker);
                    map.setFitView();
                })
            });
        },

        tiemPosition() { // 标记多个
            let index = 0
            let interval = setInterval(()=>{
                if(index == 7) clearInterval(interval)
                let pos = posiotns[index]
                console.log(index + '==' + JSON.stringify(pos));
                
                if (marker) map.remove(marker);
                marker = new AMap.Marker({
                    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    position: [pos.lng, pos.lat]
                });
                
                // 
                AMap.plugin("AMap.Geocoder", function () {
                    geocoder = new AMap.Geocoder();
                    geocoder.getAddress([pos.lng, pos.lat], function (status, result) {
                        if (status === 'complete') {
                            const address = result.regeocode.formattedAddress
                            var content = [
                                '<div style="padding:0px 0px 4px;"=""><b>高德软件有限公司</b>',
                                '电话 : 010-84107000   邮编 : 100102',
                                '地址 : '+address+'</div></div>'
                            ];
                            var infoWindow = new AMap.InfoWindow({
                                offset: new AMap.Pixel(0, -30), 
                                content: content.join("<br>")
                            });
                            infoWindow.open(map, marker.getPosition());
                        }
                    })
                });

                map.add(marker);
                map.setFitView();

                index++
            }, 2000)
        },

        markerPoistion() { // 地图加载完成后，标记出所有车的定位位置
            const _this = this
            for(let item of posiotns) {
                marker = new AMap.Marker({
                    // icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                    icon: "https://webapi.amap.com/images/car.png",
                    offset: new AMap.Pixel(-26, -13),
                    autoRotation: true,
                    angle:-90,
                    position: [item.lng, item.lat]
                });

                //初始化信息窗口
                // var infoWindow = new AMap.InfoWindow({offset: new AMap.Pixel(0, -30), content: JSON.stringify(item)});
                // infoWindow.open(map, marker.getPosition());

                map.add(marker);
                map.setFitView();
            }
        },

        polyline() { // 地图加载完成后，绘制轨迹
            let polyline = new AMap.Polyline({
                map: map,
                path: lineArr,
                showDir:true,
                strokeColor: "#28F",  //线颜色
                strokeWeight: 6,      //线宽
            });
        },

        passedPolyline() { // 车辆移动后，绘制已行驶的轨迹颜色
            var passedPolyline = new AMap.Polyline({
                map: map,
                strokeColor: "#AF5",  //线颜色
                strokeWeight: 6,      //线宽
            });
            // 监听移动事件
            marker.on('moving', function (e) {
                passedPolyline.setPath(e.passedPath);
            });
        },

        startAnimation() { // 开始动画
            this.passedPolyline() // 车辆开始动画前，监听移动事件，改变已行驶过的轨迹的颜色
            marker.moveAlong(lineArr, 600);

            //map.setFitView();
            //map.setCenter([116.478935, 39.997761]);
            //map.setZoom(17);
        },
        pauseAnimation() { // 暂停动画
            marker.pauseMove();
        },
        resumeAnimation() { // 继续动画
            marker.resumeMove();
        },
        stopAnimation() { // 停止动画
            marker.stopMove();
        },

        geocoder(address) { //根据地址定位
            let _this = this
            AMap.plugin("AMap.Geocoder", function () {
                geocoder = new AMap.Geocoder();
                geocoder.getLocation(address, function (status, result) {
                    if (status === 'complete') {
                        const location = result.geocodes[0].location

                        if (marker) map.remove(marker);
                        marker = new AMap.Marker({
                            icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png",
                            position: [location.lng, location.lat]
                        });
                        map.add(marker);
                        map.setFitView();

                        _this.form.longitude = location.lng
                        _this.form.latitude = location.lat
                    }
                })
            });
        },

        handleSearch() {

        }
    }
}
</script>

<style lang="scss" scoped>
</style>